<template>
	<view class="recommendBox">
		<view class="recommendItemx" v-for="(item,index) in coupon" :key="index">
			<view class="recommendItem" @click.stop="goPage(item.path,item.privilegeId,item)">
				<view class="ItemImgBox">
					<!--  mode="widthFix" -->
					<image class="recommendItemImg" :src="item.src"></image>
				</view>

				<view class="recommendItemName">{{item.name}}</view>
				<!-- "consumeType": 3, //消费类型：1=人民币 2=面值 3=二选一 -->
				<view class="recommendItemMian" v-if="Status == 'default'">
					{{item.mian | mian(item.consumeType)}}<span v-if="item.consumeType != 1">面值</span><span
						v-if="item.consumeType == 3"
						class="recommendItemGan">/</span>{{item.price | price(item.consumeType)}}<span
						v-if="item.consumeType != 2">元</span>
				</view>
			</view>

		</view>
		<view class="myLoading">
			<loading :toast="status" :title="'暂未特权卡'"></loading>
		</view>
		
		<u-popup class="boxBiger" :mask-close-able="false" border-radius=12 v-model="isShow" mode="center">
			<view class="qrBox">
				<view class="qrCerBox">
					<image class="qrCode" v-if="newQr.qrCode.length != 0" :src="newQr.qrCode"></image>
					<view class="qrBreak" @click.stop="ff_qrBreak(newQr.userPrivilegeId)" v-if="newQr.qrCode.length == 0">
						<image mode="widthFix" src="https://z3.ax1x.com/2021/09/28/4Wm4r8.png"></image>
					</view>
					<view class="qrNumber">{{newQr.payNo}}</view>
					<view class="qrTitle">{{newQr.name}}</view>
					<view class="qrBut" @click="go(newQr.path,newQr.privilegeId)">特权详情<u-icon name="arrow-right">
						</u-icon>
					</view>
				</view>
				<view @click.stop="ff_show01" v-if="isShow">
					<u-icon class="close" name="close"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import loading from "@/components/loading/loading.vue"
	export default {
		props: {
			status: {
				type: String
			},
			coupon: {
				type: Array
			},
			loadStatus: {
				type: String,
				default: 'loadmore'
			},
			Status: {
				type: String,
				default: 'default'
			},

		},
		data() {
			return {
				isYY: true,
				title: 'recommend',
				isShow: false,
				newQr: {},
				iconType: 'flower',
				loadText: {
					loadmore: '已经到底部了',
					loading: '努力加载中',
					nomore: '已经到底部了'
				},
			}
		},
		components:{
			loading
		},
		created() {
			console.log("coupon--->",this.coupon);
			// debugger
		},
		watch:{
			coupon(newVal,oldVal){
				console.log("coupon--->",newVal);
			}
		},
		filters: {
			price(val, consumeType) {
				let newVal = consumeType == 2 ? '' : val;
				return newVal
			},
			mian(val, consumeType) {
				let newVal = consumeType == 1 ? '' : val;
				return newVal
			}
		},
		methods: {
			ff_qrBreak(userPrivilegeId){
				this.$apis.privilegeQrCode(userPrivilegeId).then(res=>{
					if(res.code == 200){
						// debugger
						let newObj = JSON.parse(JSON.stringify(this.newQr));
						newObj.qrCode = res.data;
						this.newQr = JSON.parse(JSON.stringify(newObj));
						uni.showToast({
							title:"成功刷新"
						})
					}
				})
			},
			addRandomData() {
				this.$emit("addRandomDatas")
			},
			initOnShow() {
				// uni.getStorage({
				//     key: 'userPhone',
				//     success: res => {
				// 		this.show = false
				// 	},
				// 	fail: err => {
				// 		this.show = true
				// 	}
				// });
				return new Promise((ress, rejj) => {
					this.$apis.accountInfo().then(res => {
						if (res.code == 200) {
							this.userPhoneApi = res.data.phone;
							this.imgs = res.data.awardPrivilegeBg;
							if (res.data.needInviteCode) {

								if (res.data.inviteCode) {
									this.inviteCodex = res.data.inviteCode.code;
									if (!res.data.phone) {
										// debugger
										// this.isShow = 0
										// this.$emit('updataShow',)
										ress(0);
									} else {
										// debugger
										// this.isShow = 2
										// this.$emit('updataShow',2)
										ress(2);
									}
								}
							} else {
								if (!res.data.phone) {
									// debugger
									// this.$emit('updataShow',1)
									ress(1);
									// this.isShow = 1
									// 

								} else {
									// debugger
									// this.$emit('updataShow',2)
									ress(2);
									// this.isShow = 2
								}
							}
						}



						console.log("个人信息成功", res)
					}).catch(err => {
						// this.isShow = 0;

						ress(0);
						console.log("个人信息错误", err)
					})
				})




				// let labelCode
				// uni.getStorage({
				//     key: 'labelCode',
				//     success: res => {
				//         console.log(res.data);
				// 		if(res.data == 200){
				// 			uni.showToast({
				// 				title: "已保存，可在「我的-名片」修改",
				// 				icon: "none",
				// 				duration: '2500'
				// 			})
				// 			uni.removeStorage({
				// 			    key: 'labelCode'
				// 			});
				// 		}
				//     }
				// });
			},

			goPage(path, index, data) {
				// this.isPerfectbox

				this.initOnShow().then(res => {
					this.$emit('updataShow', res)
					if (res == 2) {
						let newPath = "";
						if (this.Status == "default") {

							newPath = `${path}?state=${2}&privilegeId=${index}`;
							uni.navigateTo({
								url: newPath
							})
						} else if (this.Status == "bought") {
							let newQr = {};
							// data.qrCode = "";
							// this.newQr
							this.newQr = data;
							// userPrivilegeId
							// debugger

							// debugger


							this.isShow = !this.isShow;


						}


					}
				})





			},
			ff_show01() {
				this.isShow = false;

			},
			go(path, privilegeId) {
				// debugger/''
				let newPath = `${path}?state=${0}&privilegeId=${privilegeId}`;
				this.ff_show01();
				uni.navigateTo({
					url: newPath
				})
			}
		}
	}
</script>

<style lang="scss">
	.recommendBox {
		margin: 0px 40rpx;
		display: flex;
		flex-wrap: wrap;

		// justify-content: center;
		.ItemImgBox {
			width: 326rpx;
			height: 326rpx;
			// overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
		}
       .myLoading{
		   width: 100%;
	   }
		.u_loadmore {
			margin: 0 auto;

			width: 100%;

		}

		.recommendItem {
			width: 326rpx;
			// height: 456rpx;
			opacity: 1;
			background: #f5f6f9;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 20rpx;
			padding-bottom: 24rpx;
			box-sizing: border-box;
			position: relative;
			overflow: hidden;
		}

		.recommendItemx:nth-child(2n) {
			margin-left: 19rpx;
		}

		.recommendItemImg {
			width: 100%;
			height: 100%;
		}

		.recommendItemName {

			opacity: 1;
			font-size: 26rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			text-align: center;
			color: #2d3034;
			margin-top: 20rpx;
			width: 90%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;


		}

		.recommendItemMian {
			color: #F10200;
			font-size: 34rpx;
			font-weight: 600;
			font-family: nominal;
			// display: flex;
			// align-items: flex-end;
			// margin-top: 10rpx;

			span {
				display: inline-block;
				font-size: 19rpx;
				font-weight: 700;
				padding: 0 3rpx;
				transform: translateY(-2rpx);
			}
		}

		.recommendItemGan {
			font-size: 28rpx !important;
			font-weight: 500 !important;
			transform: translateY(-2rpx);

		}

		// <view class="qrBox">
		// 	<image class="qrCode" :src="item.qrSrc"></image>
		// 	<view class="qrTitle">{{item.name}}</view>
		// 	<view class="qrBut">卡片详情<u-icon name="arrow-right"></u-icon></view>
		// </view>
		.qrBox {
			width: 590rpx;
			height: 960rpx;
			background: rgba(0, 0, 0, 0) !important;


		}

		.qrCerBox {
			width: 590rpx;
			height: 780rpx;
			border-radius: 12rpx;
			text-align: center;
			padding: 80rpx;
			box-sizing: border-box;
			background-color: #fff;
		}


		.qrCode {
			width: 430rpx;
			height: 430rpx;
		}

		.qrBreak {
			width: 430rpx;
			height: 430rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 100rpx;
			}
		}

		.qrNumber {
			font-size: 26rpx;
			font-family: Montserrat, Montserrat-Regular;
			font-weight: 400;
			text-align: CENTER;
			color: #606266;
			transform: translateY(-22rpx);
		}

		.qrTitle {
			font-size: 36rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			text-align: center;
			color: #2d3034;
			margin-top: 15rpx;
		}

		.qrBut {
			font-size: 26rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			text-align: CENTER;
			color: #f10200;
			height: 55rpx;
			line-height: 55rpx;
			margin-top: 10rpx;
		}

		.closeBox {}

		.close {
			font-size: 47rpx;
			/* padding: 30rpx; */
			height: 100rpx;
			width: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50%;
			border: 3rpx solid #fff;
			position: absolute;
			bottom: 0;
			left: 50%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			color: #fff;
			z-index: 9999999
		}

		.close::after {
			content: "";
			position: absolute;
			bottom: 100rpx;
			left: 50%;
			height: 86rpx;
			width: 5rpx;
			background-color: #fff;
		}

		.u-mode-center-box {
			background-color: rgba(0, 0, 0, 0) !important;
		}

		.boxBiger {
			// background-color: rgba(0,0,0,.6);
		}
	}
</style>
